<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/ruoyi.css">
    <link rel="stylesheet" href="../static/css/font-awesome.min.css">
    <link rel="stylesheet" href="../static/plugins/zTree3/css/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" href="../static/plugins/zTree3/css/demo.css">
</head>
<style>
    body {
        height: auto;
        font-family: "Microsoft YaHei";
    }

    button {
        font-family: "SimSun", "Helvetica Neue", Helvetica, Arial;
    }

    /* 树搜索相关 */
    .treeSearchInput {
        padding: 13px 0 0 20px;
    }

    .treeSearchInput label {
        padding: 5px 0 3px 0;
        font-size: 13px;
        font-weight: normal;
        vertical-align: middle;
    }

    .treeSearchInput input {
        width: 145px;
        vertical-align: middle;
        line-height: 24px;
        height: 26px;
        border: 1px solid #bbb;
        padding: 0 4px;
    }

    .treeSearchInput button {
        border: 1px solid #bbb;
        vertical-align: middle;
        height: 26px;
        height: 26px \9;
        font-size: 13px;
        background: #efefef;
        padding: 0 8px;
    }

    .treeShowHideButton {
        position: absolute;
        right: 8px;
        top: 2px;
        font-size: 12px;
        color: #333;
        z-index: 3;
    }

    .treeShowHideButton label {
        cursor: pointer;
    }

    .treeExpandCollapse {
        float: right;
        margin: 6px 5px;
        padding: 5px;
        font-size: 12px;
        color: #333;
        position: relative;
        z-index: 2;
        background: #fff;
    }

    .treeExpandCollapse a {
        text-decoration: none;
        color: #333
    }

    .treeselect.ztree {
        padding: 10px 20px;
    }
</style>

<body>
<div class="hold-transition box box-main">

    <input id="id" name="id" th:value="${id}" type="hidden"/>

    <input id="treeId" name="treeId" type="hidden"/>
    <input id="treeName" name="treeName" type="hidden"/>
    <div class="wrapper">
        <div class="treeShowHideButton" id="treeShowHideButton">
            <label id="btnShow" title="显示搜索" style="display:none;">︾</label>
            <label id="btnHide" title="隐藏搜索">︽</label>
        </div>
        <div class="treeSearchInput" id="search">
            <label for="keyword">关键字：</label>
            <input type="text" id="keyword"  maxlength="50">
            <button class="btn" id="btn"> 搜索</button>
        </div>
        <div class="treeExpandCollapse">
            <a href="#" id="open">展开</a> /
            <a href="#" id="close">折叠</a>
        </div>
        <div id="tree" class="ztree treeselect"></div>
    </div>

</div>

<script src="../static/plugins/layui/layui.js"></script>
<script src="../static/js/jquery-3.2.1.min.js"></script>
<script src="../static/js/jquery.base64.js"></script>
<script src="../static/js/device.js"></script>
<script src="../static/plugins/zTree3/js/jquery.ztree.all.min.js"></script>
<script src="../static/plugins/zTree3/js/jquery.ztree.exhide.min.js"></script>


<script th:inline="none">
    layui.use(['form'], function () {
        var form = layui.form;
        var tableName = 'organization';
        var treeObj;
        var treeId = $('#id').val();

        JJZ.requestTableData(tableName, '', function (data) {
            var options = {
                id: "tree",
                expandLevel: 2,
                view: {
                    selectedMulti: false,      // 设置是否允许同时选中多个节点
                    nameIsHTML: true           // 设置 name 属性是否支持 HTML 脚本
                },
                callback: {
                    onClick: zOnClick                      // 用于捕获节点被点击的事件回调函数
                },
                check: {
                    enable: false,             // 置 zTree 的节点上是否显示 checkbox / radio
                    nocheckInherit: true      // 设置子节点是否自动继承
                },
                data: {
                    key: {
                        title: "name"         // 节点数据保存节点提示信息的属性名称
                    },
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: 'parentId',
                        rootPid: 0
                    }
                },
            };
            treeObj = $.fn.zTree.init($("#tree"), options, data.records);

            var node = treeObj.getNodeByParam("id", treeId);
            if(node === null){
                $("#treeName").val('无');
            }else{
                $("#treeName").val(node.name);
            }
        });

        function zOnClick(event, treeId, treeNode) {
            var treeId = treeNode.id;
            var treeName = treeNode.name;
            $('#keyword').val(treeNode.name);
            $("#treeId").val(treeId);
            $("#treeName").val(treeName);
        }

        // 隐藏/显示搜索栏
        $('#treeShowHideButton').click(function () {
            $('#search').slideToggle(200);
            $('#btnShow').toggle();
            $('#btnHide').toggle();
            $('#keyword').focus();
        })

        // 折叠
        $('#close').click(function () {
            treeObj.expandAll(false);
        });

        // 展开
        $('#open').click(function () {
            treeObj.expandAll(true);
        });

        $('#btn').click(function () {
            var _lastValue = {};
            var value = JJZ.CommonFunction.trim($("#keyword").val());
            if (_lastValue == value) {
                return;
            }
            // 保存最后一次搜索名称
            _lastValue = value;
            var nodes = treeObj.getNodes();
            // 如果要查空字串，就退出不查了。
            if (value == "") {
                showAllNode(nodes);
                return;
            }
            hideAllNode(nodes);
            // 根据搜索值模糊匹配
            updateNodes(treeObj.getNodesByParamFuzzy("name", value));
        });

        hideAllNode = function(nodes) {
            var treeObj = $.fn.zTree.getZTreeObj("tree");
            var nodes = treeObj.transformToArray(nodes);
            for (var i = nodes.length - 1; i >= 0; i--) {
                treeObj.hideNode(nodes[i]);
            }
        }

        // 显示所有节点
        showAllNode = function(nodes) {
            nodes = treeObj.transformToArray(nodes);
            for (var i = nodes.length - 1; i >= 0; i--) {
                if (nodes[i].getParentNode() != null) {
                    treeObj.expandNode(nodes[i], true, false, false, false);
                } else {
                    treeObj.expandNode(nodes[i], true, true, false, false);
                }
                treeObj.showNode(nodes[i]);
                showAllNode(nodes[i].children);
            }
        }

        // 更新节点状态
        updateNodes=function(nodeList) {
            treeObj.showNodes(nodeList);
            for (var i = 0, l = nodeList.length; i < l; i++) {
                var treeNode = nodeList[i];
                showChildren(treeNode);
                showParent(treeNode)
            }
        }

        // 显示所有父节点
        showParent =function(treeNode) {
            var parentNode;
            while ((parentNode = treeNode.getParentNode()) != null) {
                treeObj.showNode(parentNode);
                treeObj.expandNode(parentNode, true, false, false);
                treeNode = parentNode;
            }
        },
        // 显示所有孩子节点
        showChildren = function(treeNode) {
            if (treeNode.isParent) {
                for (var idx in treeNode.children) {
                    var node = treeNode.children[idx];
                    treeObj.showNode(node);
                    showChildren(node);
                }
            }
        }


    });

</script>
</body>
</html>